import React from "react"
import { Button } from "antd";

export default function (props: any) {
    const list = [
        { title: "内贸转外贸", desc: "适用于 1688、国内电商等商家，想转型数字外贸", bg: require("@/assets/imgs/output.png") },
        { title: "新手创业", desc: "适用于想创业的企业", bg: require("@/assets/imgs/person-three.png") },
        { title: "传统外贸转线上", desc: "适用于传统线下外贸，想转型数字外贸", bg: require("@/assets/imgs/device.png") },
        { title: "跨境<span>TO C</span>转型<span>TO B</span>", desc: "适用于跨境电商 TO C 转型 TO B 的企业 ", bg: require("@/assets/imgs/box.png") },
    ]
    const secondList = [
        { title: "如果你有工厂", bg: require("@/assets/imgs/iron.png") },
        { title: "如果你有货源", bg: require("@/assets/imgs/transport.png") },
    ]
    return (
        <div className="identity">
            <div className="identity-title">适用身份</div>
            <ul className="main-list">
                {
                    list.map((item, index) => {
                        return (
                            <li key={index}>
                                <picture>
                                    <img src={item.bg} alt="" />
                                </picture>
                                <div className="content">
                                    {
                                        index <= 2 ? (
                                            <div className="title">{item.title}</div>
                                        ) : (
                                            <div className="title">
                                                跨境
                                                <span>TO C</span>转型
                                                <span>TO B</span>
                                            </div>
                                        )
                                    }
                                    <div className="desc">{item.desc}</div>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
            <ul className="second-list">
                {
                    secondList.map((item, index) => {
                        return (
                            <li key={index}>
                                <picture>
                                    <img src={item.bg} alt="" />
                                </picture>
                                <div className="content">
                                    <div className="title">{item.title}</div>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
            <div className="submit-wrapper">
                <Button className="btn-consult" type="primary" onClick={() => {
                    props.setShowFormModal(true)
                }}>开店咨询</Button>
            </div>
        </div>
    )
}